<template>
	<div :id="id" :class="className" :style="{ height: height, width: width }"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		className: {
			type: String,
			default: 'chart',
		},
		id: {
			type: String,
			default: 'barChart',
		},
		width: {
			type: String,
			default: '200px',
		},
		height: {
			type: String,
			default: '200px',
		},
	},
	data() {
		return {
			chart: null,
		}
	},
	mounted() {
		this.initChart()
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
		this.chart.dispose()
		this.chart = null
	},
	methods: {
		initChart() {
			this.chart = echarts.init(document.getElementById(this.id))
			this.chart.setOption({
				title: {
					text: '一周用电统计',
					top: '3%',
					left: '3%',
					textStyle: {
						color: '#fff',
						fontWeight: 'normal',
						fontSize: '16',
					},
				},
				legend: {
					textStyle: {
						color: '#fff',
					},
					top: '3%',
					right: '2%',
				},
				tooltip: {},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					axisLine: {
						lineStyle: {
							color: '#fff',
						},
					},
				},
				yAxis: {
					type: 'value',
					axisLine: {
						lineStyle: {
							color: '#fff',
						},
					},
				},

				series: [
					{
						name: '空调',
						type: 'bar',
						data: [320, 332, 301, 334, 390, 330, 320],
					},

					{
						name: '照明',
						type: 'bar',
						data: [620, 732, 701, 734, 1090, 1130, 1120],
					},
					{
						name: '电脑',
						type: 'bar',
						data: [60, 72, 71, 74, 190, 130, 110],
					},
				],
			})
		},
		setChartOptions(data) {
			let optionsdata = data
			// 基础配置
			let options = {}
			options.title = {
				text: optionsdata.title,
				top: '3%',
				left: '3%',
				textStyle: {
					color: '#fff',
					fontWeight: 'normal',
					fontSize: '16',
				},
			}
			options.legend = {
				textStyle: {
					color: '#fff',
				},
				top: '3%',
				right: '2%',
			}
			options.grid = {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true,
			}
			options.xAxis = {
				type: 'category',
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				axisLine: {
					lineStyle: {
						color: '#fff',
					},
				},
			}
			options.yAxis = {
				type: 'value',
				axisLine: {
					lineStyle: {
						color: '#fff',
					},
				},
			}

			this.chart.setOption(options)
		},
	},
}
</script>
